<template>
  <div class="news-wrapper m-b-10">
    <el-card shadow="never" class="cardInfo">
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
        <label class="updateTime" style="cursor: pointer;" @click="gotWikiList">更多</label>
      </div>
      <div>
        <div v-for="(item,index) in wikiList" :key="index" class="news-wrapper-cont" @click="openViewWiki(item.id)">
          <span class="news-item-content">{{ index + 1 }}. {{ item.title }}</span>
        </div>
      </div>
    </el-card>
    <el-dialog width="55%" :close-on-click-modal="false" :modal="false" :visible.sync="dialogVisible" title="知识库">
      <el-form ref="ruleForm" :model="params" label-width="6rem" :rules="rules">
        <el-row :gutter="40">
          <el-col :span="16">
            <el-form-item label="标题：" prop="title">
              <el-input v-model="params.title" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型：" prop="type">
              <el-input v-model="params.typeName" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="内容：" prop="content">
              <Tinymce
                ref="editor"
                v-model="params.content"
                type="goods"
                :disabled="true"
                :height="300"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件：" prop="files">
              <div>
                <div class="file-url">
                  <div v-for="(item, index) in params.wikiAttachs" :key="index" class="fz14 file-url-cont">
                    <div>
                      <span @click="wikiDownClick(item.filePath)">{{ item.fileName }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listSimpleWiki, viewWiki } from '@/api/wiki'
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      wikiList: [],
      isActive: false,
      dialogVisible: false,
      params: {
        id: '',
        title: '',
        type: '2',
        content: '',
        wikiAttachs: []
      },
      wikiTypeList: [],
      rules: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      listSimpleWiki(8).then(res => {
        if (res) {
          if (res.code) {
            this.$message.error(`${res.msg}`)
          } else {
            this.wikiList = res
          }
        }
      })
    },
    gotWikiList() {
      this.$router.push(`/wiki/wikiSearchList`)
    },
    openViewWiki(id) {
      this.dialogVisible = true
      if (id) {
        this.flag = true
        viewWiki(id).then(res => {
          if (res) {
            if (res.code) {
              this.$message.error(`${res.msg}`)
            } else {
              this.params = res
              this.$refs.editor.setContent(res.content)
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.news-wrapper{
  .news-wrapper-cont{
      width: 100%;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
   }
   .cardInfo{
      min-height: 300px;
      border: 0px;
      border-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      overflow-x: hidden;
      overflow-Y: hidden;
   }
   .news-item-content{
      font-size: 14px;
      cursor: pointer;
      color: darkgray;
   }
}
</style>
